<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container">

      <!-- 头部导航搜索添加等 -->

      <el-date-picker
        @change='list()'
        class="filter-item"
        style="margin-left: 10px;"
        v-model="listQuery.time"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        @click='list()'
      >
        刷新
      </el-button>
    </div>

      <el-descriptions title="" v-if='tab' :column="3" :size="size" border>

        <el-descriptions-item>
          <template slot="label">

            总收益
          </template>
          {{tab.AllLncome}}元
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">

            总票数
          </template>
          {{tab.AllVote}}票
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">

            真人投票数
          </template>
          {{tab.VoteNumber}}票
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">

            真人刷礼物所值得票数
          </template>
          {{tab.GiftNmuber}}票
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">

            系统赠票
          </template>
          {{tab.SystemVote}}票
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">

            系统赠礼所值票数
          </template>
          {{tab.SystemGift}}票
        </el-descriptions-item>
      </el-descriptions>
      <el-row :gutter="20"  v-if='tab'  style="margin-top: 1rem;">
        <el-col :span="15">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>真假数据比例</span>
            </div>
            <div class="text item">
              <indeximage

              :shuju='{
                zongshu:[
                  tab.AllVote,
                  tab.GiftNmuber,
                  tab.AllLncome

                ],
                wjzs:[
                  tab.VoteNumber+tab.GiftNmuber,
                  tab.GiftNmuber+tab.SystemGift,
                  tab.AllLncome
                ],
                xttj:[

                  tab.SystemVote+tab.SystemGift,
                  tab.SystemGift,
                  0
                ],
              }'
              ></indeximage>
            </div>
          </el-card>

        </el-col>
        <el-col :span="9">

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>所得票比例</span>
            </div>
            <div  class="text item">
              <sdpimage
                :data='{
                  ht:tab.SystemVote+tab.SystemGift,
                  tp:tab.GiftNmuber,
                  sl:tab.VoteNumber
                }'
              ></sdpimage>
            </div>
          </el-card>
        </el-col>

      </el-row>



  </div>
</template>

<script>
  import indeximage from './image/index.vue'
  import sdpimage from './image/sdp.vue'
  import { bmdata } from '@/api/public.js';
  // 引入api
  export default {
    props:['info_id'],
    components:{indeximage,sdpimage},
    data() {
      return {
        size: '',
        // 判定加载
        loading: false,
        // 判定where
        listQuery: {

          time:null

        },
        tab:null,
         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    // 进入页面加载数据
    created() {
      this.list()
    },
    methods: {
      // 获取列表
      list() {

        this.loading = true
        var than = this
        this.tab = null

        bmdata({
          info_id:this.info_id,
          role_id: this.rolemodel,
          listQuery: this.listQuery
        }).then(res => {
          than.tab = res.data.tabdata

          than.loading = false
          // router.addRoutes(res)
        }).catch((res) => {
          console.log('22222')
          than.loading = false
        })
      }
    }
  }
</script>
<style>
  <style>
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }

    .box-card {
      width: 100%;
    }
  </style>
</style>
